<template>
  <!-- 逻辑：在这个页面获取数据，通过props传参的方式给各个组件传参 -->
  <div class="report">
    <tableTool>
      <div slot="export">
        <el-button type="primary" @click="excelExport">导出</el-button>
      </div>
      <div class="tool-form" slot="form">
        <div class="input-group">
          <span class="lable">设备名称：</span>
          <el-input placeholder="请输入" v-model="filterEquipmentName" />
        </div>
        <div class="input-group">
          <span class="lable">设备类别：</span>
          <el-input placeholder="请输入" v-model="filterCategoryName" />
        </div>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </tableTool>
    <customTable :list="list" :combined="combined">
      <template v-slot:title>
        <tr>
          <th colspan="18">{{ orgName }}</th>
        </tr>
        <tr>
          <th rowspan="2">设备编号</th>
          <th rowspan="2">设备名称</th>
          <th rowspan="2">规格型号</th>
          <th rowspan="2">结算日期</th>
          <th rowspan="2">种类</th>
          <th rowspan="2">机材凭证</th>
          <th rowspan="2">财务凭证</th>
          <th rowspan="2">摘要</th>
          <th rowspan="2">税额</th>
          <th rowspan="2">运输费</th>
          <th rowspan="2">维修费</th>
          <th colspan="5">租赁费</th>
          <th rowspan="2">其他费</th>
          <th rowspan="2">结算单位</th>
        </tr>
        <tr>
          <th>租金</th>
          <th>租用时间</th>
          <th>租金单价</th>
          <th>操作手工资</th>
          <th>累计进/退场费</th>
        </tr>
      </template>
      <template #body="{ list }">
        <tr v-for="item in list" :key="item.id">
          <td class="link">
            <span @click="
              toJump({
                equipmentNumber: item.equipmentNumber,
                orgId: item.orgId,
              })
            ">{{ item.equipmentNumber }}</span>
          </td>
          <td>{{ item.equipmentName }}</td>
          <td>{{ item.equipmentStandard }}</td>
          <td>{{ item.settleDate }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.f }}</td>
          <td>{{ item.financeProof }}</td>
          <td>{{ item.remark }}</td>
          <td>{{ item.taxAmount }}</td>
          <td>{{ item.transportAmount }}</td>
          <td>{{ item.repairAmount }}</td>
          <td>{{ item.leaseRent }}</td>
          <td>{{ item.leaseTime }}</td>
          <td>{{ item.leaseUnitPrice }}</td>
          <td>{{ item.leaseOperatorSalary }}</td>
          <td>{{ item.leaseAccessAmount }}</td>
          <td>{{ item.otherAmount }}</td>
          <td>{{ item.settleUnit }}</td>
        </tr>
      </template>
      <template #empty>
        <tr>
          <td colspan="18" class="empty">暂无数据</td>
        </tr>
      </template>
      <template #footer="{ combined }">
        <tr>
          <td>合计</td>
          <td>{{ combined.equipmentName }}</td>
          <td>{{ combined.equipmentStandard }}</td>
          <td>{{ combined.settleDate }}</td>
          <td>{{ combined.type }}</td>
          <td>{{ combined.f }}</td>
          <td>{{ combined.financeProof }}</td>
          <td>{{ combined.remark }}</td>
          <td>{{ combined.taxAmount }}</td>
          <td>{{ combined.transportAmount }}</td>
          <td>{{ combined.repairAmount }}</td>
          <td>{{ combined.leaseRent }}</td>
          <td>{{ combined.leaseTime }}</td>
          <td>{{ combined.leaseUnitPrice }}</td>
          <td>{{ combined.leaseOperatorSalary }}</td>
          <td>{{ combined.leaseAccessAmount }}</td>
          <td>{{ combined.otherAmount }}</td>
          <td>{{ combined.settleUnit }}</td>
        </tr>
      </template>
    </customTable>
    <pagination @onCurrentChange="handleCurrentChange" :total="page.total"></pagination>
  </div>
</template>
<script>
import tableTool from '../components/tableTool.vue'
import customTable from '../components/customTable.vue'
import pagination from '../components/pagination.vue'
import { combinedFn, formatTime } from '@/pages/comprehensiveReport/equipmentManagement/mixin'
import request from '@/api/comprehensiveReport/equipmentManagement.js'
export default {
  name: 'equipmentExpenseLedgerProject',
  components: { tableTool, customTable, pagination },
  data () {
    return {
      list: [],
      orgName: '',
      page: {
        total: 0,
        currentPage: 1,
        limit: 10,
      },
      combined: {},
      headers: {
        // 定义对应关系- 把英文的key转化成中文的key所对应的值
        设备编号: 'equipmentNumber',
        设备名称: 'equipmentName',
        规格型号: 'equipmentStandard',
        结算日期: 'settleDate',
        种类: 'type',
        机材凭证: 'f',
        财务凭证: 'financeProof',
        摘要: 'remark',
        税额: 'taxAmount',
        运输费: 'transportAmount',
        维修费: 'repairAmount',
        租金: 'leaseRent',
        租用时间: 'leaseTime',
        租金单价: 'leaseUnitPrice',
        操作手工资: 'leaseOperatorSalary',
        '累计进/退场费': 'leaseAccessAmount',
        其他费: 'otherAmount',
        结算单位: 'settleUnit',
      },
      filterCategoryName: '',
      filterEquipmentName: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    onSearch () {
      this.getList()
    },
    onReset () {
      this.filterCategoryName = ''
      this.filterEquipmentName = ''
      this.getList()
    },
    async getList () {
      const orgId = this.$route.query.orgId || localStorage.orgId
      // 获取当前机构名称
      this.orgName = this.$route.query.orgName || this.$store.state.userInfo.orgInfo.orgName
      // 携带参数：currentPage(当前页)，limit(每页显示多少条)
      const data = await request.getEquipmentCostDetails({
        page: this.page.currentPage,
        limit: this.page.limit,
        orgId,
        filterCategoryName: this.filterCategoryName,
        filterEquipmentName: this.filterEquipmentName
      })
      if (data.list.length == 0) {
        this.list = []
        this.combined = {}
        this.page.total = 0
        return;
      }
      console.log('发送请求，获取数据', data)
      this.page.total = data.totalCount
      const { list, combined } = combinedFn(Object.values(this.headers).slice(1), data.list, [
        'taxAmount',
        'transportAmount',
        'repairAmount',
        'leaseRent',
        'leaseOperatorSalary',
        'leaseAccessAmount',
        'otherAmount',
      ])
      this.list = formatTime(['settleDate'], list)
      this.combined = combined
    },
    handleCurrentChange (currentPage) {
      console.log(`当前页: 第${currentPage}页`)
      this.page.currentPage = currentPage
      // 请求数据
      this.getList()
    },
    toJump (data) {
      const { orgId, equipmentNumber } = data
      // 传递机构id:orgId 和设备编号:equipmentNumber
      this.$router.push({
        path: '/equipmentExpenseLedgerDetail',
        query: {
          orgId,
          equipmentNumber,
        },
      })
    },
    excelExport () {
      const multiHeader = [
        ['项目部', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        [
          '设备编号',
          '设备名称',
          '规格型号',
          '结算日期',
          '种类',
          '机材凭证',
          '财务凭证',
          '摘要',
          '税额',
          '运输费',
          '维修费',
          '租赁费',
          '',
          '',
          '',
          '',
          '其他费',
          '结算单位',
        ],
      ]
      const merges = [
        'A1:R1',
        'L2:P2',
        'A2:A3',
        'B2:B3',
        'C2:C3',
        'D2:D3',
        'E2:E3',
        'F2:F3',
        'G2:G3',
        'H2:H3',
        'I2:I3',
        'J2:J3',
        'K2:K3',
        'Q2:Q3',
        'R2:R3',
      ]
      // 懒加载 script-loader
      import('@/utils/Export2Excel.js').then(async (excel) => {
        const orgId = this.$route.query.orgId || localStorage.orgId
        const { list } = await request.getEquipmentCostDetails({
          page: 1,
          limit: this.page.total,
          orgId,
        })
        const data = this.formatJson(this.headers, list) // 转化数据表结构
        // 重新计算合计，将所有数据的 list 传进去
        const combined = combinedFn(Object.values(this.headers).slice(1), list, [
          'taxAmount',
          'transportAmount',
          'repairAmount',
          'leaseRent',
          'leaseOperatorSalary',
          'leaseAccessAmount',
          'otherAmount',
        ])
        data.push(['合计', ...Object.values(combined)])
        excel.export_json_to_excel({
          header: Object.keys(this.headers),
          data,
          filename: '设备管理-设备费用账册-设备编号明细-' + this.orgName,
          autoWidth: true,
          bookType: 'xlsx',
          multiHeader,
          merges,
        })
      })
    },
    formatJson (headers, list) {
      return list.map((item) => {
        return Object.values(headers).map((value) => {
          return item[value]
        })
      })
    },
  },
}
</script>
<style lang="scss">

</style>
